<!-- @format -->

<script setup>
	import { ref } from 'vue'
	const model = defineModel()

	// 控制输入框是否显示
	const visible = ref(false)
	const f = ref('')

	// 显示
	const show = () => {
		visible.value = true
	}

	// 隐藏
	const hide = () => {
		visible.value = false
		f.value = ''
	}

	// 新增
	const add = () => {
		if (f.value) {
			model.value.push(f.value)
		}
		hide()
	}
</script>

<template>
	<div class="bit-feature">
		<input
			v-focus
			v-if="visible"
			v-model.trim="f"
			class="ipt"
			type="text"
			placeholder="请输入特点"
			@blur="hide"
			@keydown.enter="add" />
		<div
			class="feature"
			v-else
			@dblclick="show">
			<span
				v-for="(f, index) in model"
				:key="index"
				>{{ f }}</span
			>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.bit-feature {
		cursor: pointer;
		.ipt {
			box-sizing: border-box;
			width: 180px;
			height: 30px;
			padding: 6px;
			border: 1px solid #d0d0d0;
			color: #888;
			appearance: none;
			outline: none;
			&::placeholder {
				font-size: 12px;
				color: #888;
			}
		}
		.feature {
			span {
				display: inline-block;
				height: 24px;
				line-height: 24px;
				margin: 3px;
				padding: 0 10px;
				font-size: 12px;
				border-radius: 6px;
				background: #000;
				color: #409eff;
				background: rgb(216.8, 235.6, 255);
			}
		}
	}
</style>
